<template>
	<view class="my-top" :style="{ backgroundColor: userData.is_teacher ? '#429EAC' : '#CBE9F2' }" @tap="clickLogin">
		<u-transition :show="true" mode="fade-left" duration="800">
			<view class="transition">
				<view class="img-list">
					<view class="my-top-img top-img"><u--image width="64" height="64" :src="userData.avatarUrl" shape="circle"></u--image></view>

					<view class="my-top-flex">
						<view class="my-top-title">{{ userData.nickName }}</view>
						<view class="my-top-text" v-if="userData.is_teacher != null">
							<u-tag :text="userData.is_teacher ? '已认证教师' : '学生'" size="mini" :type="userData.is_teacher ? 'warning' : 'primary'"></u-tag>
						</view>
					</view>
				</view>

				<view class="my-top-flex"><u-tag :text="'剩' + userData.keshi + '课时'" size="mini" :type="userData.is_teacher ? 'success' : 'warning'"></u-tag></view>
			</view>
		</u-transition>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 个人信息
			// 请求回来的所有用户信息
			userData: {
				avatarUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
				nickName: '立即登录',
				is_teacher: null
			}
		};
	},
	mounted() {
		if (uni.getStorageSync('userData')) {
			this.userData = uni.getStorageSync('userData');
		}
	},
	methods: {
		clickLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style>
.my-top {
	/* background: #6c7df1; */
	display: flex;
	align-items: flex-start;
	padding: 22px;
	color: #fff;
	font-size: 14px;
	height: 122px;
}
.transition {
	display: flex;
	justify-content: space-between;
	width: 650rpx;
}
.img-list {
	display: flex;
}
.my-top-img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.top-img {
	width: 130rpx;
}
.my-top-title {
	font-size: 16px;
}

.my-top-flex {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}
</style>
